<template>
    <div class="item-box">
        <div class="item-img">
            <img :src="award['img']" alt="" srcset="">
        </div>
        <div class="item-title">
            {{award['title']}}
        </div>
        <div class="item-desc">
            {{award['desc']}}
        </div>
    </div>
</template>
<script>
export default {
    name: 'RewardItem',
    props:{
        award:{
            type: Object,
        }
    }
}
</script>
<style lang="stylus" scoped>
    .item-box
        width 100%
        background $theme-color-deeper
        border-radius 20px
        box-sizing border-box
        padding 10px 10px 17px
        text-align center
        .item-img
            border 12px solid transparent
            border-image url('../assets/img/border_red.png') 24 round
            img 
                width 100%
                height $width
        .item-title
            font-size 16px
            color $font-color
            margin 8px 0 4px
        .item-desc
            font-size 14px
            color #FFEBD7
            line-height 17px
            margin-top 8px

</style>